<template>
  <div>
    <button @click="getThis">点击获取this</button>
    <p>{{ count }}</p>
    <button @click="Destroy">点击销毁</button>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    getThis() {
      console.log(this);
    },
    Destroy() {
      this.$destroy();
    },
  },
  // 数据创建前 此时只有生命周期和event 无法通过vm访问到data中的数据,methods中的方法
  beforeCreate() {
    console.log(11);
    console.log(this);
  },
  //数据创建完成后 完成了数据挟持和数据代理 
  // 此时可以通过vm访问data中的数据,methods中配置的方法
  created() {
    console.log(1);
    console.log(this);
  },
  // 解析模板之前
  // 页面呈现的是未经Vue编译的DOM结构 对所有Dom的操作最终都不奏效
  beforeMount() {
    console.log(this);
  },
  // 解析模板之后此时页面中呈现的是经过Vue编译的Dom
  // 对Dom的操作均有效.至此初始化的过程结束
  mounted() {
    console.log(this);
  },
  //更新阶段 数据是最新的,但是页面时旧的 即页面尚未与数据保持同步
  beforeUpdate() {
    console.log(this);
  },
  //更新完成后 根据新数据,生成新的虚拟Dom,随后与旧的虚拟dom进行比较,最终完成页面的更新,即完成了Model-->Vue的更新
  updated() {
    console.log(this, "更新完成后");
  },
  // 销毁阶段此时:vm中所有的data,methods,指令等等都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器,取消订阅消息,解绑自定义事件等收尾操作
  beforeDestroy() {
    console.log(this, "销毁前");
  },
  // 销毁后 可以看到vm实例 但已经断开了所有的关联
  destroyed() {
    console.log(this, "销毁后");
  },
};
</script>
<style>
</style>